// Name:                       Breadcrumb
//
// Description:                Define style for breadcrumb
//
// Component:                 `.am-breadcrumb`
//
// States:                    `.am-active`
//
// =============================================================================

/* ==========================================================================
   Component: Breadcrumb
 ============================================================================ */

.@{ns}breadcrumb {
    padding: .7em .5em;
    margin-bottom: @line-height-computed;
    list-style: none;
    background-color: @breadcrumb-bg;
    border-radius: @global-radius;
    font-size: @breadcrumb-font-size;
    >li {
        display: inline-block;
        [class*="@{ns}icon-"] {
            &:before {
                color: @breadcrumb-active-color;
                margin-right: 5px;
            }
        }
        +li:before {
            content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
            padding: 0 8px;
            color: @breadcrumb-divider-color;
        }
    }
    >.@{ns}active {
        color: @breadcrumb-active-color;
    }
    .hook-breadcrumb;
}

.@{ns}breadcrumb-slash {
    >li+li:before {
        content: "/\00a0";
    }
}

// Hooks
// =============================================================================
.hook-breadcrumb() {}
